import React, { Component } from "react";
import "./6.css";
export default class Slider extends Component {
  // /images/1.jpg   /images/2.jpg   /images/3.jpg
  state = {
    num: 1,
  };

  render() {
    return (
      <div id="slider-container">
        <div className="slider-container">
          <img src={`/images/${this.state.num}.jpg`} alt="" />
          <div onClick={this.prev} className="prev btn">
            &lt;
          </div>
          <div onClick={this.next} className="next btn">
            &gt;
          </div>
        </div>
      </div>
    );
  }

  //下一张的功能
  next = () => {
    //解构赋值
    let { num } = this.state;
    //判断
    if (num >= 5) {
      num = 1;
    } else {
      num += 1;
    }
    //更新状态
    this.setState({
      num: num,
    });
  };

  //上一张的功能
  prev = () => {
    //解构赋值
    let { num } = this.state;
    //判断
    if (num <= 1) {
      num = 5;
    } else {
      num -= 1;
    }
    //更新状态
    this.setState({
      num: num,
    });
  };
}
